<template>
  <div>
    <h2>我的预约</h2>
    <!-- 搜索框 -->
    <el-input
      v-model="searchQuery"
      placeholder="搜索预约..."
      clearable
      style="width: 50%; margin-bottom: 20px;"
    />
    
    <!-- 对于没有记录的显示提示 -->
    <p v-if="filteredReservations.length === 0">此处没有预约记录。</p>
    
    <el-row :gutter="20" v-else>
      <el-col v-for="reservation in paginatedReservations" :key="reservation.id" :span="6">
        <!-- 使用 ReservationCard 组件来展示预约信息 -->
        <ReservationCard :reservation="reservation" />
      </el-col>
    </el-row>

    <!-- 添加分页功能 -->
    <el-pagination
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="filteredReservations.length"
      @current-change="handlePageChange"
      style="margin-top: 20px;"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { findReservationByUserIdService } from '@/api/locationrecord'; // 确保路径正确
import ReservationCard from '@/components/Location/MyReservationCard.vue'; // 引入预约信息卡片组件

const reservations = ref([]); // 用于存储预约记录
const searchQuery = ref(''); // 用于存储搜索框的内容
const currentPage = ref(1); // 当前页码
const pageSize = ref(6); // 每页显示的记录数

// 查询当前用户的预约记录
const fetchReservations = async () => {
  try {
    const response = await findReservationByUserIdService(); // 获取当前用户的预约记录
    reservations.value = response.data; // 假设服务返回的数据包含预约记录数组
    console.log('用户的预约记录:', reservations.value); // 输出预约记录到控制台
  } catch (error) {
    console.error('查询预约记录时出错:', error);
  }
};

// 计算过滤后的预约记录
const filteredReservations = computed(() => {
  return reservations.value.filter(reservation => 
    reservation.locationName.includes(searchQuery.value) || 
    reservation.userPhone.includes(searchQuery.value)
  );
});

// 计算分页后的预约记录
const paginatedReservations = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return filteredReservations.value.slice(start, start + pageSize.value);
});

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
};

// 组件挂载时调用查询函数
onMounted(() => {
  fetchReservations();
});
</script>

<style scoped>
h2 {
  margin-bottom: 20px; /* 添加标题下边距 */
}
</style>
